<template>
  <div class="app-container">
      <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>经销商提现信息详情</span>
      <div style="margin-top: 15px">
          <p class="title">提现信息</p>
          <ul>
              <li><label class="left">姓名：</label><span class="right">{{currentProfitInfo.username}}</span></li>
              <li><label class="left">手机号：</label><span class="right">{{currentProfitInfo.phone}}</span></li>
              <li><label class="left">支付宝账号：</label><span class="right">{{currentProfitInfo.payAccount}}</span></li>
              <li><label class="left">可提现金额：</label><span class="right">{{moneyIcon}} {{currentProfitInfo.canBonusAmount}}</span></li>
          </ul>
          <el-button class="btn-add" @click="handleMoney()" size="mini">打款操作</el-button>
      </div>
      
    </el-card>
    <div class="order-list-title">待分红订单列表</div>
     <el-table ref="orderTable"
                :data="list"
                style="width: 100%;"
                @selection-change="handleSelectionChange"
                v-loading="listLoading" border>
        <el-table-column label="订单ID" width="80" align="center">
          <template slot-scope="scope">{{scope.row.id}}</template>
        </el-table-column>
        <el-table-column label="订单编号" width="210" align="center">
          <template slot-scope="scope">{{scope.row.orderSn}}</template>
        </el-table-column>
        <el-table-column label="提交时间" width="180" align="center">
          <template slot-scope="scope">{{scope.row.createTimeStr}}</template>
        </el-table-column>
        <el-table-column label="用户账号" align="center">
          <template slot-scope="scope">{{scope.row.memberUsername}}</template>
        </el-table-column>
        <el-table-column label="订单总金额" width="120" align="center">
          <template slot-scope="scope">{{moneyIcon}}{{scope.row.totalAmount}}</template>
        </el-table-column>
        <el-table-column label="实际支付金额" width="120" align="center">
          <template slot-scope="scope">{{moneyIcon}}{{scope.row.payAmount}}</template>
        </el-table-column>
        <!-- <el-table-column label="支付方式" width="80" align="center">
          <template slot-scope="scope">{{scope.row.payType | formatPayType}}</template>
        </el-table-column> -->
        <!-- <el-table-column label="订单来源" width="120" align="center">
          <template slot-scope="scope">{{scope.row.sourceType | formatSourceType}}</template>
        </el-table-column> -->
        <el-table-column label="订单状态" width="100" align="center">
          <template slot-scope="scope">{{scope.row.status | formatStatus}}</template>
        </el-table-column>
        <!-- <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleViewOrder(scope.$index, scope.row)"
            >查看订单</el-button>
            <el-button
              size="mini"
              @click="handleCloseOrder(scope.$index, scope.row)"
              v-show="scope.row.status===0">关闭订单</el-button>
            <el-button
              size="mini"
              @click="handleDeliveryOrder(scope.$index, scope.row)"
              v-show="scope.row.status===1">订单发货</el-button>
    
            <el-button
              size="mini"
              type="danger"
              @click="handleDeleteOrder(scope.$index, scope.row)"
              v-show="scope.row.status===4">删除订单</el-button>
          </template>
        </el-table-column> -->
      </el-table>

    <!-- 经销商推广订单列表 -->
    <el-dialog title="经销商推广订单列表" width="34rem" :visible.sync="ispromotionOrderListOpen" :close-on-click-modal="true" :show-close="true" class="adjustmentBox">
      <el-table :data="promotionOrderList" border style="width: 100%;margin-bottom: 20px;">
        <el-table-column label="编号" width="100" align="center">
          <template slot-scope="scope"> {{scope.row.id}} </template>
        </el-table-column>
         <el-table-column label="订单号" width="100" align="center">
          <template slot-scope="scope"> {{scope.row.orderId}} </template>
        </el-table-column>
        <el-table-column label="订单金额" width="150" align="center">
          <template slot-scope="scope"> {{scope.row.orderAmount}} </template>
        </el-table-column>
        <el-table-column label="统计日期"  align="center">
          <template slot-scope="scope"> {{scope.row.recordDate}} </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
    import {
    // fetchSalesmanProfitList,
    // updateSalesmanProfitInfo,
    // getSalesmanProfitList,
    getSalesmanProfigDetail,
    operateSalesmanProfigDetail
  } from '@/api/salesprofit'

//   import {fetchList as fetchSkuStockList,update as updateSkuStockList} from '@/api/skuStock'
//   import {fetchList as fetchProductAttrList} from '@/api/productAttr'
//   import {fetchList as fetchBrandList} from '@/api/brand'
//   import {fetchListWithChildren} from '@/api/productCate'

  const defaultListQuery = {
    // nickname: null,
    pageNum: 1,
    pageSize: 5,
  };
  export default {
    name: "SalesmanList",
    data() {
      return {
          moneyIcon:process.env.MONEY_ICON,
          currentProfitInfo:{},//当前经销商的提现信息：姓名，手机号，支付宝账号
        promotionOrderList:[],//某经销商推广订单列表
        ispromotionOrderListOpen:false,//某经销商推广订单列表弹窗
          list:[],
          defaultProps: {
            children: 'children',
            label: 'label'
            },
          listQuery:Object.assign({}, defaultListQuery),
          newForm:{//新增经销商弹框里内容
            nickname:'',
            invitationCode:'',
            desc:'',
            status:1,
          },
          editForm: {//编辑经销商弹框里内容
            nickname:'',
            invitationCode:'',
            desc:'',
            multipleSelection:[],
            status:1,
          },
          promotionList:{
            list:[],
            listQuery:{
              keyword: null,
              pageNum: 1,
              pageSize: 5,
            },
            total:null,
          },
          newFormRules:{
            nickname:[
                { required: true,  message: '经销商名不能为空', trigger: ['blur','change']}
             ],
            invitationCode:[
                { required: true,  message: '链接不能为空', trigger: ['blur','change']}
             ],
            //  sort:[
            //     { required: true,  message: '排序不能为空', trigger: ['blur','change']}
            //  ],
            //  icon:[
            //     { required: true,  message: '图标不能为空', trigger: ['blur','change']}
            //  ],
          },
          editFormRules:{
            nickname:[
                { required: true,  message: '经销商名不能为空', trigger: ['blur','change']}
             ],
             invitationCode:[
                { required: true,  message: '链接不能为空', trigger: ['blur','change']}
             ],
            //  sort:[
            //     { required: true,  message: '排序不能为空', trigger: ['blur','change']}
            //  ],
            //  icon:[
            //     { required: true,  message: '图标不能为空', trigger: ['blur','change']}
            //  ],
          },

          isNewSalesmanOpen:false,//新增经销商弹窗
          isEditSalesmanOpen:false,//编辑经销商弹窗
         
      }
    },
    filters:{
         formatStatus(value) {
        if (value === 1) {
          return '待发货';
        } else if (value === 2) {
          return '已发货';
        } else if (value === 3) {
          return '已完成';
        } else if (value === 4) {
          return '已关闭';
        } else if (value === 5) {
          return '无效订单';
        }else if (value === 6) {
          return '售后中';
        }
        else if (value === 7) {
          return '退款中';
        }
        else if (value === 8) {
          return '已退款';
        }
         else {
          return '待付款';
        }
      },
    },
    created() {
      this.getList();
    },
    methods:{
        handleMoney(){
          this.$confirm('是否将状态更新为已打款', '提示：此操作不可逆', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(() => {
              let did = this.$route.query.id;
              let orderSn = this.$route.query.orderSn;
              console.log(orderSn);
              // return
              operateSalesmanProfigDetail(did,{distributorId:did,orderSns:orderSn}).then(res=>{
                  if(res.code ==200){
                      this.$message({
                          message: '操作成功',
                          type: 'success',
                          duration: 2000
                      });
                      this.getList();
                  }else{
                      this.$message({
                          message: res.message?res.message:'操作失败',
                          type: 'error',
                          duration: 2000
                      })
                  }
              })
            })
        },
      getList() {
        this.listLoading = true;
        getSalesmanProfigDetail(this.$route.query.id).then(response => {
            if(response.code === 200){
               this.listLoading = false;
                let res = response.data;
                this.list = res.orderList;
                this.currentProfitInfo = res;
            }
        });
      },
      searchQueryList(){
        this.listQuery.pageNum = 1;
        this.getList();
      },
      getSalesmanProfitListFun(index,row){
        let tempObj={};
        tempObj.distributorId = row.distributorId;
        tempObj.recordMonth = row.recordMonth;
        // tempObj.startDate='2020-03-01';
        // tempObj.endDate='2020-03-31';
        tempObj.pageNum = 1;
        tempObj.pageSize=1000;
        getSalesmanProfitList(tempObj).then(res=>{
          if(res.code ==200){
            this.promotionOrderList = res.data;
            this.ispromotionOrderListOpen = true;
          }
        })
      },
      showupdateSalesmanProfitInfo(index,row){
        let self = this;
        let tempStatus = row.status;
        if(tempStatus==1){
          self.$message({
             message: '已分红状态不允许修改',
              type: 'error',
              duration: 2000
          });
          return
        }
        let tempStatusTxt = '';
        if(tempStatus==0){
          tempStatusTxt='已分红'
        }else{
          tempStatusTxt='未分红'
        }
        this.$confirm('是否将状态更新为'+tempStatusTxt, '提示：此操作不可逆', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          updateSalesmanProfitInfo(row.id).then(res=>{
            if(res.code ==200){
              self.$message({
                message: '更新成功',
                type: 'success',
                duration: 1000
              })
              self.getList();
            }
          })
        })
      },
      // updateSalesmanProfitInfo(index,item){
      //   let self = this;
      //   self.editForm = Object.assign(self.editForm,JSON.parse(JSON.stringify(item)));
      //   self.editForm.currentUId = item.id;
      //   if(item.discountId){
      //     let row=null;
      //     let curPId= item.discountId;
      //     self.promotionList.list.forEach((item,index)=>{
      //       if(item.id == curPId){
      //         row = item;
      //         //self.handleSelectionChange(row);
      //         console.log(row);
      //         self.$refs['singleTable'].setCurrentRow(row)
      //       }
      //     })
          
      //   }
      // },
      getPromotionList(){
        fetchSalesDiscountList().then(res=>{
          this.promotionList.list = res.data.list;
          this.promotionList.total = res.data.list.total;
        })
      },
      handleSelectionChange(val){
        console.log(val);
        this.editForm.multipleSelection = val;
      },
      handleAddProduct(){
          this.isNewSalesmanOpen = true;
      },
      saveNewSalesman(){
          let self= this;
          self.newForm.description = self.newForm.name;
          console.log(self.newForm);
        newSalesmanInfo(self.newForm).then(response=>{
            if(response.code == 200){
                self.$message({
                message: '新建成功',
                type: 'success',
                duration: 1000
            });
            self.isNewSalesmanOpen=false;
            self.getList();
            }
        })
      },
    //   saveSalesmanInfo(){
    //       console.log(this.editForm);
    //     this.editForm.discountId = this.editForm.multipleSelection.id;
    //     updateSalesmanProfitInfo(this.editForm.currentUId,this.editForm).then(response=>{
    //         this.$message({
    //             message: '修改成功',
    //             type: 'success',
    //             duration: 1000
    //         });
    //         this.isEditSalesmanOpen=false;
    //         this.getList();
    //     });
    //   },
       handleDialogSizeChange(val) {
        this.editForm.listQuery.pageNum = 1;
        this.editForm.listQuery.pageSize = val;
        this.getPromotionList();
      },
      handleDialogCurrentChange(val) {
        this.editForm.listQuery.pageNum = val;
        this.getPromotionList();
      },
      handleDeleteSalesman(index,item){
          let self = this;
           self.$confirm('删除该经销商, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                // let arrTemp= [];
                // arrTemp.push(item.id);
                // //objTemp.ids = arrTemp;
                // let params = new URLSearchParams();
                // params.append('id', arrTemp);
                let delId=item.id;
                deleteSalesman(delId).then(response=>{
                    if(response.code === 200){
                        self.$message({
                            message: '删除成功',
                            type: 'success',
                            duration: 1000
                        });
                        self.getList();
                    }
                });
            }).catch(() => {
                // self.$message({
                //     type: 'info',
                //     message: '已取消删除'
                // });          
            });
      },
      
    }
  }
</script>
<style scoped>
.btn-add{
    font-size: 14px;
    padding: 10px;
    margin-top: -8px;
  color:#fff;
  background-color:#417FF6;
}
/* 弹出框的宽度 */
.adjustmentBox >>> .el-dialog{
  width: 28rem;
} 

.editform-promotion >>> tr.current-row td{
  background-color: #999;
}
.order-list-title{
    margin: 20px 0;
    font-size: 18px;
    font-weight: 600;
}
</style>